<template>
	<div ref="container" class="video-player"></div>
</template>

<script>
export default {
	props: {
		videoTrack: Object,
		audioTrack: Object,
	},
	watch: {
		videoTrack(val) {
			if (val) this.videoTrack.play(this.$refs.container)
		},
		audioTrack(val) {
			if (val) this.audioTrack.play()
		},
	},
	beforeDestroy() {
		this.videoTrack?.stop()
		this.audioTrack?.stop()
	},
}
</script>

<style scoped>
.video-player {
	width: 320px;
	height: 240px;
}
</style>
